import React from 'react';
import {
    View,
    Image,
    TouchableHighlight,
    StyleSheet
} from 'react-native';
import Swiper from 'react-native-swiper';
import { screen } from '../../public/common';
import color from '../../public/widget/color';
export default class SwiperView extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            imgList:[
                {url:require('../../images/home/less_loan.jpg')},
                {url:require('../../images/home/large_loan.jpg')},
            ]
        }
    }
    render() {
        let {imgList} = this.state;
        return (
            <Swiper
                height={150}
                style={styles.wrapper}
                autoplayTimeout={2.5}
                showsButtons={false}// showButtons —— 是否显示左右翻页按钮
                autoplay={true}//—— 是否自动播放
                paginationStyle={{bottom: 10}}
                dotStyle={styles.dotStyle}// dotStyle —— 小点点的样式
                activeDotStyle={styles.activeDotStyle} // activeDotStyle —— 当前被激活的小点点的样式
            >
                {imgList.map((item,i)=>(
                    <TouchableHighlight key={i} onPress={()=>{}}>
                        <Image style={styles.bannerImg}  source={item.url} resizeMode={"contain"}/>
                    </TouchableHighlight>
                ))}
            </Swiper>)
    }
}
const styles = StyleSheet.create({
    wrapper: {
        width:screen.width,
    },
    bannerImg: {
        width:screen.width-20,
        height:150,
        marginLeft: 10,
    },
    dotStyle: {
        width: 5,
        height: 5,
        backgroundColor:color.gray,
        opacity: 0.4,
        borderRadius: 5,
    },
    activeDotStyle: {
        width: 5,
        height: 5,
        backgroundColor:'#000',
        borderRadius: 5,
    },
});